import React from "react";

export type SpanProps = {
  children: React.ReactNode;
  /** 字体大小 */
  fontSize: number | string;
  /** 字体颜色 */
  color?: string;
  /** 是否加划线 */
  lineThrough?: boolean;
  /** 字重 */
  bold?: boolean;
  /** 自定义样式 */
  styles?: React.CSSProperties;
} & React.SVGProps<SVGTSpanElement>;

const Span = ({
  fontSize,
  children,
  color,
  lineThrough,
  bold,
  styles,
  ...rest
}: SpanProps) => {
  if (!children) return null;
  return (
    <>
      <tspan
        fontSize={fontSize}
        fill={color}
        style={{
          verticalAlign: "middle",
          textDecoration: lineThrough ? "line-through" : "",
          fontWeight: bold ? "bold" : "normal",
          ...styles,
        }}
        {...rest}
      >
        {children}
      </tspan>
    </>
  );
};

export { Span };
